<template>
    <PageView>
        <vxe-form title-colon
            :valid-config="{theme: 'normal'}"
            @reset="resetFormData">

            <!-- 开始日期 -->
            <vxe-form-item span="4" title="部署日期" field="deployDate" :item-render="{}">
                <template #default>
                    <vxe-input v-model="processDefinitionComponentStore.formData.deployDate"
                        placeholder="选择日期"
                        type="date" />
                </template>
            </vxe-form-item>

            <!-- 部署器 -->
            <vxe-form-item span="4" title="部署名称" field="deploymentId" :item-render="{}">
                <template #default>
                    <vxe-input v-model="processDefinitionComponentStore.formData.deploymentId"
                        placeholder="请选择部署器" />
                </template>
            </vxe-form-item>

            <!-- 部署流程的名称 -->
            <vxe-form-item span="4" title="流程名称" field="processDefinitionName" :item-render="{}">
                <template #default>
                    <vxe-input v-model="processDefinitionComponentStore.formData.processDefinitionName"
                        placeholder="请输入流程名称" />
                </template>
            </vxe-form-item>

            <!-- 部署流程的的唯一 KEY -->
            <vxe-form-item span="4" title="流程定义KEY" field="processDefinitionKey" :item-render="{}">
                <template #default>
                    <vxe-input v-model="processDefinitionComponentStore.formData.processDefinitionKey"
                        placeholder="请输入流程定义唯一KEY" />
                </template>
            </vxe-form-item>

            <!-- 流程是否已激活 -->
            <vxe-form-item span="4" title="状态" field="active" :item-render="{}">
                <template #default>
                    <vxe-input placeholder="请输入状态" />
                </template>
            </vxe-form-item>

            <!-- 查询按钮 -->
            <vxe-form-item collapse-node :item-render="{}">
                <template #default>
                    <vxe-button icon="vxe-icon-search"
                        type="submit"
                        status="primary"
                        content="查询"
                        @click="" />
                    <vxe-button icon="vxe-icon-repeat" type="reset" content="重置" />
                </template>
            </vxe-form-item>
        </vxe-form>

        <!-- 表格的工具栏 -->
        <vxe-toolbar ref="toolbarRef" custom />

        <!-- 表格 -->
        <vxe-table
            ref="tableRef"
            border
            stripe
            empty-text="暂无数据"
            min-height="300"
            :loading="processDefinitionComponentStore.tableLoading"
            :column-config="{resizable: true}"
            :row-config="{isHover: true}"
            :data="processDefinitionComponentStore.tableDataList">
            <vxe-column field="id" title="ID" min-width="100px" show-overflow />
            <vxe-column field="key" title="流程定义 KEY" min-width="100px" show-overflow />
            <vxe-column field="name" title="流程名称" min-width="100px" show-overflow />
            <vxe-column field="tenantId" title="租户 ID" min-width="100px" show-overflow />
            <vxe-column field="deploymentId" title="部署 ID" min-width="100px" show-overflow />
            <vxe-column field="version" title="部署版本" min-width="100px" show-overflow />
            <vxe-column field="versionTag" title="版本标签" min-width="100px" show-overflow />
            <vxe-column field="category" title="流程定义分类" min-width="100px" show-overflow />
            <vxe-column field="description" title="流程定义描述" min-width="100px" show-overflow />
            <vxe-column field="resourceName" title="资源" min-width="100px" show-overflow />
            <vxe-column field="isSuspended" title="是否挂起" min-width="100px" show-overflow />
        </vxe-table>

        <!-- 分页导航栏 -->
        <vxe-pager
            style="margin-top: 10px"
            align="right"
            v-model:currentPage="processDefinitionComponentStore.pageNum"
            v-model:pageSize="processDefinitionComponentStore.pageSize"
            :total="processDefinitionComponentStore.totalRow"
            @page-change="processDefinitionComponentStore.queryTableDataList()">
        </vxe-pager>
    </PageView>
</template>

<script setup lang="ts">
import PageView from '@/views/layout/PageView.vue';
import {onMounted, ref} from 'vue';
import type {VxeTableInstance, VxeToolbarInstance} from 'vxe-table';
import {useProcessDefinitionComponentStore} from "@/store/UseProcessDefinitionComponentStore.ts";
import MessageUtils from '@/utils/MessageUtils.ts';

const processDefinitionComponentStore = useProcessDefinitionComponentStore();
const toolbarRef = ref<VxeToolbarInstance>();
const tableRef = ref<VxeTableInstance>();

onMounted(() => {
    // 如果使用表格工具栏的内置功能，需要先关联表格，通过调用 connect() 方法与表格进行关联，就可以开启相关的功能
    const $table = tableRef.value;
    const $toolbar = toolbarRef.value;
    if ($table && $toolbar) {
        $table.connect($toolbar);
    }

    // 查询表格数据
    processDefinitionComponentStore.tableLoading = true;
    processDefinitionComponentStore.queryTableDataList().catch((reason) => {
        MessageUtils.showErrorMessage(reason.message);
    }).finally(() => {
        processDefinitionComponentStore.tableLoading = false;
    });
})

// 重置表单数据
const resetFormData = () => {

};
</script>
